import React, { useState, useEffect,memo,useMemo,useCallback} from "react"
import "./Classify.scss"
import { classifyList } from "../../services/classify"
import { myList } from "../../utils/interface"
import { useHistory } from 'react-router-dom'

//引入组件
import ClassifyLeft from '../../component/Classify/ClassifyLeft'
// import ClassifyRight from '../../component/Classify/ClassifyRight'
const Classify: React.FC = () => {
    let history=useHistory()
    let MyClassifyLeft = memo(ClassifyLeft)
    // let MyClassifyRight = memo(ClassifyRight)
    const [list, setList] = useState<myList[]>([])
    const [carIndex, setCarIndex] = useState<number>(0)
    const myList=useMemo(()=>list,[list])
    const MyCarIndex=useMemo(()=>carIndex,[carIndex])
    const MySetCarIndex=useCallback((str)=>{
        return setCarIndex(str)
    },[])

    useEffect(() => {
        classifyList().then(res => {
            setList(res.data.dataList)
        })
    }, [])
    function classScl(e: React.UIEvent<HTMLDivElement, UIEvent>) {
        let scl = (document.querySelector(".classifyRight") as Element).scrollTop
        let arr = document.querySelectorAll('h3')
        arr.forEach((item, index) => {
            if (scl >= item.offsetTop - 10) {
                setCarIndex(index)
            }
        })
    }
    function pushDetail(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
        if (e.target !== e.currentTarget) {
            let obj = (e.target as HTMLElement).dataset.items
            history.push({
                pathname: '/detail',
                state: JSON.parse(obj as string)
            })
        }
    }
    function pushSearch() {
        history.push('/index/search')
    }
    return <div className='classify'>
        <div className='search'>
            <input type="text" placeholder='搜索你想知道的一切排名' onClick={pushSearch} />
        </div>
        <div className='classBody'>
            <MyClassifyLeft list={myList} carIndex={MyCarIndex} setCarIndex={MySetCarIndex}></MyClassifyLeft>
            <div className='classifyRight' onScroll={classScl}>
                {
                    list.map((item) => {
                        return <section key={item.id}>
                            <h3>{item.name}</h3>
                            <div className='classItem'  onClick={pushDetail}>
                                {
                                    item.rankList.map((i, index) => {
                                        return <dl key={index} data-items={JSON.stringify(i)}>
                                            <dt data-items={JSON.stringify(i)}><img src={i.image} alt="" data-items={JSON.stringify(i)}/></dt>
                                            <dd data-items={JSON.stringify(i)}>{i.name}</dd>
                                        </dl>
                                    })
                                }
                            </div>
                        </section>
                    })
                }
            </div>
        </div>
    </div>
}
export default Classify